<template>
  <div>
    <van-cell class="summary">
      <van-row>
        <van-col span="12">总分：{{ templateInfo.TemplateScore }}</van-col>
        <van-col span="12">自评得分：{{ score }}</van-col>
      </van-row>
    </van-cell>
    <div id="divApp" class="check-list">
      <van-collapse v-model="activeNames">
        <van-divider dashed>考核项</van-divider>
        <template v-for="(item, index) in listProject">
          <van-collapse-item
            v-bind:name="index + 1"
            v-bind:key="index"
            icon="coupon-o"
          >
            <template #title>
              <div class="checklist-title">
                {{ item.AssessmentTarget }}
              </div>
            </template>
            <div v-bind:key="index" id="divList">
              <template v-for="(itemGns, indexGns) in item.Grandsons">
                <div
                  style="margin-bottom: 10px; padding-bottom: 10px"
                  v-bind:key="indexGns"
                >
                  <van-field
                    label-width="60px"
                    v-bind:value="itemGns.ItemNo"
                    style="display: none"
                  ></van-field>
                  <van-row>
                    <van-col span="24">
                      <span class="spanPoint">
                        {{ indexGns + 1 }}、{{ itemGns.GradingPoint }}（{{
                          itemGns.Score
                        }}分）
                      </span>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">
                      <span> 评分标准：{{ itemGns.GradingStandard }} </span>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">
                      <div>
                        <van-field
                          required
                          v-bind:value="itemGns.SelfList[0].Score"
                          type="number"
                          v-model="itemGns.SelfList[0].Score"
                          placeholder="请输入自评得分"
                          label="自评得分"
                          label-width="80"
                          v-bind:rules="[
                            { required: true, message: '请输入自评得分' },
                          ]"
                          @blur="calcScore($event)"
                        />
                      </div>
                    </van-col>
                  </van-row>
                  <van-field
                    label-width="80px"
                    v-bind:value="itemGns.SelfList[0].DeductRemark"
                    v-model="itemGns.SelfList[0].DeductRemark"
                    type="textarea"
                    autosize
                    maxlength="1000"
                    label="加扣分说明"
                    placeholder="请输入加扣分说明"
                  />
                  <div @click="setCurrentID(itemGns.ItemNo, 'gns')">
                    <FileUpload
                      labelWidth="80px"
                      @CallBack="_fileUploadCb"
                      :attachs="itemGns.SelfList[0].Attachs"
                      labelName="附件"
                    />
                  </div>
                </div>
                <van-divider v-bind:key="index"></van-divider>
              </template>
            </div>
          </van-collapse-item>
        </template>
        <van-divider dashed v-show="showTarget">指标项</van-divider>
        <template v-for="(itemTarget, indexTarget) in listTarget"  v-show="showTarget">
          <van-collapse-item
            v-bind:name="itemTarget.IndexName"
            v-bind:key="itemTarget.ItemNo"
          >
            <template #title>
              <img
                class="title-logo"
                src="@/assets/Images/AppIcon/fragment_noticetype_3.png"
                alt
              />
              {{ itemTarget.IndexName }}
            </template>
            <div id="divList2" v-bind:key="indexTarget">
              <van-row>
                <van-col span="24">
                  <span>分数：{{ itemTarget.Score }}</span>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="24">
                  <span>评分标准：{{ itemTarget.GradingStandard }}</span>
                </van-col>
              </van-row>
              <van-field
                v-if="itemTarget.isCalc == 1"
                label-width="80px"
                v-bind:value="itemTarget.CalculateValue"
                label="指标值"
                type="number"
                readonly
                v-model="itemTarget.CalculateValue"
                placeholder="请输入指标值"
              />
              <van-field
                v-else
                label-width="80px"
                v-bind:value="itemTarget.SelfList[0].CalculateValue"
                v-model="itemTarget.SelfList[0].CalculateValue"
                label="指标值"
                type="number"
                placeholder="请输入指标值"
              />
              <van-field
                label-width="80px"
                v-bind:value="itemTarget.SelfList[0].Score"
                v-model="itemTarget.SelfList[0].Score"
                v-bind:rules="[{ required: true, message: '请输入自评得分' }]"
                label="自评得分"
                type="number"
                name="validator"
                placeholder="请输入自评得分"
                @blur="calcScore($event)"
              />
              <van-field
                label-width="80px"
                v-bind:value="itemTarget.SelfList[0].DeductRemark"
                v-model="itemTarget.SelfList[0].DeductRemark"
                label="加扣分说明"
                type="textarea"
                placeholder="请输入加扣分说明"
              />
              <div @click="setCurrentID(itemTarget.ItemNo, 'target')">
                <FileUpload
                  labelWidth="80px"
                  @CallBack="_fileUploadCb"
                  :attachs="itemTarget.SelfList[0].Attachs"
                  labelName="附件"
                />
              </div>
            </div>
          </van-collapse-item>
        </template>
        <div id="divButton" class="bottom-buttons">
          <van-button
            class="submit-button"
            type="primary"
            @click="buttonSave('1')"
            >提交自评</van-button
          >
          <van-button class="save-btn" @click="buttonSave('0')" type="info"
            >暂存</van-button
          >
        </div>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import { findTaskByID, selfUpdate } from "@/api/ZXTFAchievements";
import FileList from "@/components/FileList/FileList.vue";
import Enclosure from "@/components/Enclosure/Enclosure.vue";
import { uploadAttach } from "@/api/common";
export default {
  components: {
    Enclosure,
    FileList,
  },
  data() {
    return {
      filePopup: false,
      fileList: [],
      showEnclosure: false,
      List: [],
      searchEntity: {},
      templateInfo: { TemplateScore: null },
      listProject: null,
      listTarget: null,
      showTarget:false,
      show: false,
      activeNames: ["1"],
      id: this.$route.query.ID,
      currentItemNo: null,
      fileType: null,
      attachs: null,
      score: null,
    };
  },
  created() {
    if (this.$route.query.ID) {
      this.getDetail();
    }
  },
  computed: {},
  methods: {
    setCurrentID(itemNo, fileType) {
      this.currentItemNo = itemNo;
      this.fileType = fileType;
      this.fileOperate();
    },
    _fileUploadCb(attachs) {
      var vm = this;
      //this.form.Attach = attachs;
      vm.attachs = attachs;

      vm.fileOperate();
    },
    fileOperate() {
      var vm = this;
      if (vm.attachs != null) {
        if (vm.fileType == "gns") {
          for (var i = 0; i < vm.listProject.length; i++) {
            for (var j = 0; j < vm.listProject[i].Grandsons.length; j++) {
              if (vm.listProject[i].Grandsons[j].ItemNo == vm.currentItemNo) {
                vm.listProject[i].Grandsons[j].SelfList[0].Attachs = vm.attachs;
              }
            }
          }
        } else {
          for (var i = 0; i < vm.listTarget.length; i++) {
            if (vm.listTarget[i].ItemNo == vm.currentItemNo) {
              vm.listTarget[i].SelfList[0].Attachs = vm.attachs;
            }
          }
        }
        vm.attachs = null;
      }
    },
    getDetail() {
      var me = this;
      let params = { ID: this.id };
      findTaskByID(params).then((res) => {
        if (res != null && res.data != null) {
          me.searchEntity = res.data;
          me.templateInfo = res.data.TemplateInfo;
          me.listProject = res.data.TemplateInfo.Details;
          me.listTarget = res.data.TemplateInfo.Details2;
          if(me.listTarget!=null&&me.listTarget.length>0){
            me.showTarget=true;
          }else{
            me.showTarget=false;
          }
          if (res.data.AllScore) {
            me.score = res.data.AllScore;
          }
        }
      });
    },
    validator(val) {
      return true;
    },

    buttonSave(index) {
      var vm = this;
      var params = {};
      var saveProject = [];
      params.Details = [];
      params.Details3 = [];

      if (index == 1) {
        params.IsPublish = true;
        //  alert("提交");
      } else {
        params.IsPublish = false;
        //  alert("暂存");
      }
      params.ID = vm.searchEntity.ID;
      for (var i = 0; i < vm.listProject.length; i++) {
        for (var j = 0; j < vm.listProject[i].Grandsons.length; j++) {
          var tempDetailPro = {};
          tempDetailPro.Code = vm.listProject[i].Grandsons[j].ItemNo;
          tempDetailPro.Score =
            vm.listProject[i].Grandsons[j].SelfList[0].Score;
          if (!tempDetailPro.Score) {
            return this.$toast(
              "请输入【" +
                vm.listProject[i].AssessmentTarget +
                vm.listProject[i].Grandsons[j].GradingPoint +
                "】的自评得分"
            );
          }
          if (tempDetailPro.Score > vm.listProject[i].Grandsons[j].Score) {
            return this.$toast(
              "【" +
                vm.listProject[i].AssessmentTarget +
                vm.listProject[i].Grandsons[j].GradingPoint +
                "】的自评得分不能大于设定分数"
            );
          }

          tempDetailPro.DeductRemark =
            vm.listProject[i].Grandsons[j].SelfList[0].DeductRemark;
          tempDetailPro.Attachs =
            vm.listProject[i].Grandsons[j].SelfList[0].Attachs;
          params.Details.push(tempDetailPro);
        }
      }

      for (var i = 0; i < vm.listTarget.length; i++) {
        var tempDetailTarget = {};
        tempDetailTarget.Code = vm.listTarget[i].ItemNo;
        if (vm.listTarget[i].isCalc == 1) {
          tempDetailTarget.CalculateValue = vm.listTarget[i].CalculateValue;
        } else {
          tempDetailTarget.CalculateValue =
            vm.listTarget[i].SelfList[0].CalculateValue;
        }
        tempDetailTarget.Score = vm.listTarget[i].SelfList[0].Score;
        if (!tempDetailTarget.isCalc & !tempDetailTarget.CalculateValue) {
          return this.$toast(
            "请输入【" + vm.listTarget[i].IndexName + "】的指标值"
          );
        }
        if (!tempDetailTarget.Score) {
          return this.$toast(
            "请输入【" + vm.listTarget[i].IndexName + "】的自评得分"
          );
        }
        if (tempDetailTarget.Score > vm.listTarget[i].Score) {
          return this.$toast(
            "【" + vm.listTarget[i].IndexName + "】自评得分不能大于设定分数"
          );
        }
        tempDetailTarget.DeductRemark =
          vm.listTarget[i].SelfList[0].DeductRemark;
        tempDetailTarget.Attachs = vm.listTarget[i].SelfList[0].Attachs;
        params.Details3.push(tempDetailTarget);
      }
      //自评
      selfUpdate(params).then((res) => {
        if (params.IsPublish) {
          this.$toast.success("自评成功");
        } else {
          this.$toast.success("保存成功");
        }
        this.closePage();
      });
    },
    closePage() {
      this.$router.goRefresh();
    },
    calcScore(event) {
      var value = event.target.value;
      var vm = this;
      vm.score = null;
      for (var i = 0; i < vm.listProject.length; i++) {
        if (
          vm.listProject[i].Grandsons != null &&
          vm.listProject[i].Grandsons.length > 0
        ) {
          for (var j = 0; j < vm.listProject[i].Grandsons.length; j++) {
            if (vm.listProject[i].Grandsons[j].SelfList[0].Score) {
              vm.score += Number(
                Number(
                  vm.listProject[i].Grandsons[j].SelfList[0].Score
                ).toFixed(2)
              );
            }
          }
        }
      }
      for (var i = 0; i < vm.listTarget.length; i++) {
        if (vm.listTarget[i].SelfList[0].Score) {
          vm.score += Number(
            Number(vm.listTarget[i].SelfList[0].Score).toFixed(2)
          );
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#divFileUpload .van-cell,
#divFileUpload1 .van-cell {
  background-color: transparent;
}

#divList .spanPoint,
#divList2 .spanPoint {
  font-size: 15px;
  color: black;
}

#divList span,
#divList2 span {
  color: #646566;
  font-size: 14px;
  line-height: 28px;
}
.van-col {
  vertical-align: middle;
}

.van-cell::after {
  border-bottom: 0px;
}
.van-field__label {
  width: 1.8rem;
  margin-right: 0px;
}
.total-count {
  display: flex;
  align-items: center;
}
.check-list {
  min-height: 100vh;
  padding-bottom: 100px;
  background-color: #e8f1f8;
}
.checklist-title {
  display: flex;
  align-items: center;
}
.title-logo {
  width: 15px;
  height: 16px;
  margin-right: 10px;
}
// 符合按钮
.accord-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .accord-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30%;
    height: 22px;
    background-color: #fff;
    color: #666;
    font-size: 12px;
  }
  .active {
    background-color: #1989fa;
    color: #fff;
  }
  .inconformity {
    background-color: #ee0a24;
    color: #fff;
  }
  .not-applicable {
    background-color: #ff976a;
    color: #fff;
  }
}
.inconformity-list {
  background-color: #fff;
  margin-top: 10px;
  padding-top: 10px;
}
/*
        .main {
            height: 100vh;
        }
    */

.det_top_box {
  padding: 10px;
  background-color: #e8f1f8;
}

.detail_header {
  color: #ffffff;
  background: url("../../../assets/Images/AppIcon/image_riskunit_detail_bg.png");
  background-size: cover;
  padding: 10px;
  border-radius: 5px;
  /*background-color: #fff;*/
}
.det_tab {
  padding: 10px;
  .det_tab_item {
    padding: 10px 0;
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;

    .det_tab_item_text {
      padding: 0 10px;
    }
  }
}

.text_img {
  display: flex;
  align-items: center;

  .img_item {
    width: 33.3%;
    text-align: center;

    img {
      height: 25px;
      width: 25px;
      margin-bottom: 10px;
    }
  }
}

.text_total_img {
  display: flex;
  align-items: center;

  .img_item {
    width: 33.3%;
    text-align: center;

    .img_item_top {
      display: flex;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}

.bottom-buttons {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .submit-button,
  .save-btn {
    border: none;
    border-radius: 0;
  }
  .submit-button {
    width: 70%;
  }
  .save-btn {
    width: 30%;
  }
}
.van-divider {
  border-color: #ccc;
}
</style>

<style lang="less">
.check-list {
  padding-top: 1.2rem;
  .van-collapse {
    .van-collapse-item__content {
      background-color: #e8f1f8;
      padding: 10px 10px 10px 10px;
    }
  }
}

.summary {
  position: fixed;
  top: 1.2rem;
  z-index: 100;
}
</style>